<template>
	<div style="padding: 8px">
		<el-form :model="form" label-width="80px" size="small" label-position="left">
            <el-form-item label="台账名称">
				<el-input v-model="form.F1210"  />
			</el-form-item>

			<el-form-item label="台账类型" >
				<el-select v-model="form.F1118" placeholder="请选择" class="hFromCss">
					<el-option label="其他台账" value="option1" />
					<el-option label="渔政台账" value="option2" />
					<el-option label="水政台账" value="option3" />
					<el-option label="农业台账" value="option4" />
					<el-option label="在建台账" value="option5" />
				</el-select>
			</el-form-item>
			<el-row :gutter="24">
				<el-col :span="19">
					<el-form-item label="地址"> <el-input v-model="form.F1119" /></el-form-item>
				</el-col>
				<el-col :span="4" :pull="1">
                    <el-tag class="ml-2"  @click="confirm(2)"  size="small" >点击</el-tag>
                     </el-col>
			</el-row>
			<el-text class="mx-1" size="small" style="padding-left: 20px;padding-bottom: 2px;color: #BBBBBB;">提示:点击地图获取地址信息</el-text>
			<el-form-item label="坐标">
				<el-input v-model="form.F1120" />
			</el-form-item>
			<el-form-item label="负责人">
				<el-input v-model="form.F1251" />
			</el-form-item>
			<el-form-item label="联系方式">
				<el-input />
			</el-form-item>
			<el-form-item label="采集人名称">
				<el-input v-model="form.F1124" />
			</el-form-item>
			<el-form-item label="采集时间">
				<el-date-picker v-model="form.date1" type="date" placeholder="请选择"  class="hFromCss"/>
			</el-form-item>

			<el-form-item label="图片描述">
				<el-input v-model="form.F1130" />
			</el-form-item>
			<el-form-item label="数据状态">
				<el-select v-model="form.F1131" placeholder="请选择"  class="hFromCss">
					<el-option label="已取消" value="state1" />
					<el-option label="已暂停" value="state2" />
					<el-option label="正常" value="state3" />
				</el-select>
			</el-form-item>

			
			<el-form-item label="河道(水库)类型" label-width="100px">
				<el-input v-model="form.F1206" />
			</el-form-item>
			<el-form-item label="是否主要河道水域" label-width="120px">
				<el-select v-model="form.F1207" placeholder="请选择"  class="hFromCss">
					<el-option label="否" value="state1" />
					<el-option label="是" value="state2" />
				</el-select>
			</el-form-item>
			<el-form-item label="是否有饮用水源保护区" label-width="135px">
				<el-select v-model="form.F1208" placeholder="请选择"  class="hFromCss">
					<el-option label="否" value="state1" />
					<el-option label="是" value="state2" />
				</el-select>
			</el-form-item>
			<el-form-item label="长度(库容)">
				<el-input v-model="form.F1209" />
			</el-form-item>
			<el-form-item label="巡查周期">
				<el-select v-model="form.F1256" placeholder="请选择"  class="hFromCss">
					<el-option label="每月一次" value="state1" />
					<el-option label="每周一次" value="state2" />
				</el-select>
			</el-form-item>
		</el-form>
		<div style="margin: 10px 0;float: right;">
			<el-button type="primary" size="small" @click="confirm(1)">确定</el-button>
            <el-button type="primary"  size="small" @click="confirm(0)" plain>取消</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { reactive, defineEmits } from 'vue';
import { useStore } from '/@/store';
const emit = defineEmits(['eventForm']);
// do not use same name with ref
const form = reactive({
	F1118: '',
	F1119: '',
	F1120: '',
	F1251: '',
	date1: '',
	date2: '',
	F1256: '',
	F1209: '',
	F1208: '',
	F1207: '',
	F1206: '',
	F1210: '',
	F1131: '',
	F1130: '',
	F1124: '',
});
const confirm = (type: any) => {
	emit('eventForm', type);
};
const pushData = (data: any) => {
	if (data) {
		form.F1120 = data.lon + ',' + data.lat;
		form.F1119 = data.addrs[0].value;
	}
	console.log('shoudao ', data);
};
defineExpose({
	pushData,
});
</script>
<style scoped>
.hFromCss{
    width: 100%;
}
</style>